<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米官网</title>
		<style>
			*
			{
				margin: 0;
				padding: 0;
			}
			/* 第一行 */
			.bbbox
			{
				width:100%;
					height: 50px;
					border: 1px solid blue;
					background:white;
					margin: auto;
			}
			.box1
			{
				width:50%;
					height: 50%;
					border: 1px solid green;
					background:white;
					float:left;
					margin-top: 10px ;
			}
			.box2
			{
				width:40%;
					height: 50%;
					border: 1px solid green;
					background:white;
					float: right;
					margin-top: 10px ;
			}
			/* 第二行 */
			.bbbox1
			{
				width:100%;
					height: 50px;
					border: 1px solid blue;
					background:white;
					margin: auto;
					margin-top: 10px ;
					position: relative;
					
			}
			.box3
			{
				width:100px ;
					height: 100%;
					border: 1px solid green;
					float:left;
					
					margin-left: 3px ;
			}
			
			.nav-main
			{
			width:1000px ;
			height: 100%;
			border: 1px solid blue;
			float: left;
			}
			.nav-main ul
			{
				list-style: none;
			}
			.nav-main li
			{
			float: left;

			}
			.nav-main li a
			{
				text-decoration: none;
				color: black;
				height: 50px;
				line-height: 50px;
				padding-left: 80px;
				
			}
			.nav-main li a:hover
			{
				color: red;
				
			}
			.erjibox
			{
			width: 100%;
			height: 150px;
			background-color: aliceblue;
			position: absolute;
			left: 0px;
			top: 50px;
			display: none;
			}
			.nav-main:hover +.erjibox
			{
				display: block;
			}
			.erjibox ul
			{
			width: 1226px;
			margin: 0 auto;
			list-style: none;
			margin-left: 5px;
			}
			.erjibox ul li
			{
			float: left;
			}
			.erjibox ul li a
			{
			display: block;
			text-decoration: none;
			color: black;
			font-size: 12px;
			text-align: center;
			margin-top: 20px;
			margin-right: 20px;
			}
			.erjibox ul li a span
			{
				color: red;
			}
			.erjibox ul li a img
			{
			width: 100px;
			height: 60px;
			}
			/* 第三行 */
			.bbbox2
			{
			width:1000px;
				height: 430px;
				border: 1px solid blue;
				background:white;
				margin: auto;
				margin-top: 10px ;
			}
			.bb1
			{
			width:130px;
				height: 412px;
				border: 1px solid blue;
				float: left;
				margin-left: 10px;
				margin-top: 10px;
				background-color: gray;
			}
			.bb1 ul
			{
			width: 110px;
			height: 412px;
			list-style: none;
			padding: 22px 10px;
			}
			.bb1 ul li
			{
				position: relative;
			height: 42px;	
			}
			.bb1 ul li a
			{
			color:aliceblue;
			font-size: 14px;
			text-decoration: none;
			}
			.bb1 ul li a:hover
			{
				color: red;
			}
			.bb1 ul li a::after /* ::before 箭头在左边 */
			{
			content: ">";
			position: absolute;
			top: 0px;
			right: 0px;
			}
			.bbb
			{
				width:90px;
					height: 40px;
					border: 1px solid blue;
					
			}
			.bb
			{
			width:850px;
				height: 410px;
				border: 1px solid blue;
				background:white;
				float: left;
				margin-left: 10px;
				margin-top: 10px;
			}
			/* 第四行 */
			.bbbox3
			{
			width:837px;
				height: 430px;
				border: 1px solid blue;
				background:white;
				margin: auto;
				margin-top: 10px ;
			}
			.bbbb
			{
				width:200px;
					height: 200px;
					border: 1px solid blue;
					background:white;
					float: left;
					margin-left: 10px;
					margin-top: 10px;
			}
			/* 第五行 */
			.bbbox4
			{
				width:1270px;
					height: 220px;
					border: 1px solid blue;
					margin: auto;
					margin-top: 10px ;
			}
			.b1
			{
				width:305px;
					height: 200px;
					border: 1px solid blue;
					background:white;
					float: left;
					margin-left: 10px;
					margin-top: 10px;
			}
			.xbox
			{
			width: 100px;
			height: 100px;
			border: 1px solid blue;
			margin-left: 0px;
			float: left;
			text-decoration: none;
			background-color:gray;
			}
			.bbbox4 .xbox a
			{
				text-decoration: none;
			}
			.bbbox4 .xbox img 
			{
			margin-top: 10px;
			margin-left: 25px;
			
			}
			.bbbox4 .xbox p 
			{
			text-align: center;
				
			}
			.bbbox4 .xbox p:hover
			{
			color: red;
			}
		</style>
	</head>
	<body>
		<div class="bbbox">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="bbbox1">
			<div class="box3"><img src=小米图标.jpg alt="left" width="60px" height="100%"/></div>
			<div class="nav-main">
				<ul>
					<li><a href="##">手机</a></li>
					<li><a href="##">电视</a></li>
					<li><a href="##">笔记本</a></li>
					<li><a href="##">路由器</a></li>
					<li><a href="##">服务中心</a></li>
					<li><a href="##">社区</a></li>
				</ul>
			</div>
			<div class="erjibox">
				<ul>
					<li><a href="##">
					<img src="手机1.png" alt="left" />
					<p>Xiaomi Civi 2</p>
					<span>2399元起</span>
					</a></li>
					<li><a href="##">
					<img src="手机2.png" alt="left" />
					<p>Xiaomi MIX Fold 2</p>
					<span>8999元起</span>
					</a></li>
					<li><a href="##">
					<img src="手机3.png" alt="left" />
					<p>Xiaomi 12S Ultra</p>
					<span>5999元起</span>
					</a></li>
					<li><a href="##">
					<img src="手机4.png" alt="left" />
					<p>Xiaomi 12S Pro</p>
					<span>4699元起</span>
					</a></li>
					<li><a href="##">
					<img src="手机5.png" alt="left" />
					<p>Xiaomi 12S</p>
					<span>3999元起</span>
					</a></li>
					<li><a href="##">
					<img src="手机6.png" alt="left" />
					<p>Xiaomi 12 Pro 天玑版</p>
					<span>3999元起</span>
					</a></li>
				</ul>
			</div>
		</div>
			
		<div class="bbbox2">
			<div class="bb1">
				<ul>
					<li><a href="##">手机</a></li>
					<li><a href="##">电视</a></li>
					<li><a href="##">家电</a></li>
					<li><a href="##">笔记本</a></li>
					<li><a href="##">出行</a></li>
					<li><a href="##">儿童</a></li>
					<li><a href="##">生活</a></li>
					<li><a href="##">电源</a></li>
					<li><a href="##">智能</a></li>
				</ul>
			</div>
			<div class="bb" style="margin-left: 0px;"></div>
			
		</div>
		
		<div class="bbbox3">
			<div class="bbbb" style="margin-left: 0px;"></div>
			<div class="bbbb"></div>
			<div class="bbbb"></div>
			<div class="bbbb"></div>
			<div class="bbbb" style="margin-left: 0px;"></div>
			<div class="bbbb"></div>
			<div class="bbbb"></div>
			<div class="bbbb" style="margin-right: 0px;"></div>
		</div>
		
		<div class="bbbox4">
			<div class="b1" style="margin-left: 0px;"><div class="xbox" style="margin-left: 0px;"><a href="##"><img src=时钟.png alt="left" width="50px" height="50px" /><p>小米秒杀</p></a></div>
			<div class="xbox"><a href="##"><img src=礼物图.png alt="left" width="50px" height="50px" /><p>企业团购</p></a></div>
			<div class="xbox"><a href="##"><img src=f码图标.png alt="left" width="50px" height="50px" /><p>F码通道</p></a></div>
			<div class="xbox" style="margin-left: 0px;"><a href="##"><img src=米粉卡.png alt="left" width="50px" height="50px" /><p>米粉卡</p></a></div>
			<div class="xbox"><img src=以旧换新.png alt="left" width="50px" height="50px" /><p>以旧换新</p></a></div>
			<div class="xbox"><img src=7-流量卡到期通知.png alt="left" width="50px" height="50px" /><p>话费充值</p></a></div></div>
			<div class="b1"></div>
			<div class="b1"></div>
			<div class="b1" style="margin-right: 0px;"></div>
		</div>
		
		
		
	</body>
</html>
